<template>
  <div>
    <h3 class="title">{{ title }}</h3>
    <ul>
      <li v-for="(entry, idx) in items" :key="idx">
        {{ entry.content }}
        <span v-if="entry.mustHave" class="must-have"> MUST HAVE</span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string;
  items: { content: string; mustHave: boolean }[];
}>()
</script>

<style scoped lang="scss">
.title {
  color: #000000;
  font-size: 16px;
  text-align: left;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 6px solid #000000;

  li {
    font-size: 14px;
    padding: 10px;
    color: #201e1f;
    font-weight: 600;
    border-bottom: 2px solid #000000;
    display: flex;
    align-items: center;

    .must-have {
      font-weight: 800;
      text-transform: uppercase;
      font-size: 8px;
      color: #00e;
      margin-left: 5px;
      white-space: nowrap;
    }
  }
}
</style>
